<template>
  <div class="projectsItemDetail-container">
    <v-expansion-panels
      v-model="selectedPanel"
      flat
      accordion
      focusable
      class="panels"
      :class="{ small: propSmall }"
    >
      <v-expansion-panel
        class="panel"
        v-for="project in syncedProjectList"
        :key="project.id"
      >
        <v-expansion-panel-header hide-actions class="panel-header">
          <v-list subheader class="panel-subheader">
            <v-list-item :class="{ 'px-2': propSmall }">
              <v-list-item-avatar
                height="100%"
                min-width="28"
                :width="propSmall ? 32 : 70"
              >
                <v-img
                  class="avatar-img"
                  src="https://cdn.vuetifyjs.com/images/lists/2.jpg"
                ></v-img>
                <div class="name">{{ project.contactPerson }}</div>
              </v-list-item-avatar>

              <v-list-item-content>
                <v-list-item-title>
                  {{ project.projectType }}-{{ project.projectNumber }}
                </v-list-item-title>

                <v-list-item-subtitle>{{
                  project.projectName
                }}</v-list-item-subtitle>
                <template v-if="propSmall">
                  <v-list-item-subtitle class="panel-subtitle mt-4 text-right">
                    <span>{{ project.startDate }}</span> -
                    <span>{{ project.endDate }}</span>
                  </v-list-item-subtitle>
                  <div class="actions-group justify-end">
                    <div class="actions-group-icon">
                      <div class="status">
                        <v-icon
                          class="arrow-icon"
                          x-small
                          :color="priorityColor(project.priority)"
                        >
                          {{
                            project.priority === "Low"
                              ? "mdi-arrow-down"
                              : "mdi-arrow-up"
                          }}
                        </v-icon>
                        <v-list-item-action-text class="mr-3">
                          {{ project.priority }}
                        </v-list-item-action-text>
                        <v-list-item-action-text class="actions-group-text">
                          <b>5</b>jobs<b>2</b>tasks
                        </v-list-item-action-text>
                      </div>
                    </div>
                  </div>
                  <div class="text-right">
                    <v-btn icon small>
                      <v-icon small color="grey">mdi-calendar-range</v-icon>
                    </v-btn>
                    <v-btn icon small>
                      <v-icon small color="grey">mdi-file</v-icon>
                    </v-btn>
                  </div>
                </template>
              </v-list-item-content>

              <v-list-item-action v-if="!propSmall">
                <v-list-item-subtitle class="panel-subtitle">
                  <span>{{ project.startDate }}</span> -
                  <span>{{ project.endDate }}</span>
                </v-list-item-subtitle>
                <div class="actions-group">
                  <div class="actions-group-icon">
                    <v-btn icon small>
                      <v-icon small color="grey">mdi-calendar-range</v-icon>
                    </v-btn>
                    <v-btn icon small>
                      <v-icon small color="grey">mdi-file</v-icon>
                    </v-btn>
                    <div class="status">
                      <v-icon
                        class="arrow-icon"
                        x-small
                        :color="priorityColor(project.priority)"
                      >
                        {{
                          project.priority === "Low"
                            ? "mdi-arrow-down"
                            : "mdi-arrow-up"
                        }}
                      </v-icon>
                      <v-list-item-action-text class="mr-3">
                        {{ project.priority }}
                      </v-list-item-action-text>
                      <v-list-item-action-text class="actions-group-text">
                        <b>5</b>jobs<b>2</b>tasks
                      </v-list-item-action-text>
                    </div>
                  </div>
                </div>
              </v-list-item-action>
            </v-list-item>
          </v-list>
        </v-expansion-panel-header>
        <v-expansion-panel-content v-if="!propSmall" class="panel-content">
          <v-expansion-panels
            v-model="subPanel"
            class="sub-panels"
            flat
            accordion
            focusable
          >
            <v-expansion-panel class="sub-panel">
              <v-expansion-panel-header class="sub-panel-header">
                <template v-slot:default>
                  <div class="d-flex justify-space-between align-center">
                    <span> Info </span>
                    <div>
                      <v-tooltip bottom>
                        <template v-slot:activator="{ on }">
                          <v-btn v-on="on" icon small>
                            <v-icon small> mdi-square-edit-outline </v-icon>
                          </v-btn>
                        </template>
                        Edit Project
                      </v-tooltip>
                    </div>
                  </div>
                </template>
              </v-expansion-panel-header>
              <v-expansion-panel-content>
                <div class="info-container pa-2">
                  <div class="info-content">
                    {{ project.projectDescription }}(DL-Delivery)
                    <br />
                    @{{ project.projectLocation }} {{ project.contactPerson }}
                    <br />
                    Contact: Mr.{{ project.contactPerson }} @{{ project.tel }}
                  </div>
                  <div class="info-content">
                    Stay One Step Ahead and In Full Control of Your Contracts by
                    Tracking them with Mizar Automated Notifications, Reminders
                    & Workflows. Contract Tracking Systems Give Control.
                    Peerless Automation,Unlimited Users, ISO Accredited
                  </div>
                </div>
              </v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, PropSync } from "vue-property-decorator";
import { IProjectItem } from "@/components/Project/index";
@Component({
  props: {
    small: Boolean,
  },
})
export default class ProjectsItemDetail extends Vue {
  @PropSync("projectList", { type: Array })
  syncedProjectList!: Array<IProjectItem>;

  get propSmall() {
    return this.$props.small;
  }

  get selectedProject() {
    return this.$store.state.ProjectsStore.selectedProject;
  }

  selectedPanelValue: number | null = null;
  get selectedPanel() {
    if (this.selectedProject) {
      return this.syncedProjectList.findIndex(
        (item) => item.id === this.selectedProject.id
      );
    } else {
      return this.selectedPanelValue;
    }
  }

  set selectedPanel(val: number | null) {
    this.selectedPanelValue = val;
  }

  subPanel = 0;

  @Watch("selectedPanelValue")
  changeSelectedPanelValue(num: number | undefined) {
    if (typeof num !== "number") {
      this.$emit("change", null);
      return;
    }
    const Project = this.syncedProjectList[num];
    this.$emit("change", Project);
  }

  priorityColor(priority: string) {
    switch (priority) {
      case "High":
        return "#F31616";
      case "Low":
        return "#67D245";
      case "Middle":
        return "#EB9B31";
      default:
        return "#F31616";
    }
  }
}
</script>

<style lang="scss">
@import "@/components/Project/Projects/ProjectsItemDetail.scss";
</style>
